<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="shortcut icon" href=""> -->

    <title>Faeple</title>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="/resources/js/html5shiv.js"></script>
      <script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
		.well{
			background-color: #fff!important;
			-webkit-transition: all 0.8s;
		   	-moz-transition: all 0.8s;
		   	-o-transition: all 0.8s;
		   	transition: all 0.8s;
		}
		.type1{border-right: 1px dashed #e6e6e6;}
		.wrapper{width: 450px; background-color: #fff; margin:0 auto;}
		.select-type{ width: 50%;float: left;padding:0 15px; text-align: center; cursor: pointer; }
		@media screen and (max-width: 470px){ .wrapper{width:100%;} .select-type{width:100%;} .type1{border-right:0;border-bottom:1px dashed #e6e6e6;padding-bottom:25px; } }
    </style>
	</head>
<body>
<div id="viewport">
<div id="page">
	<!-- header -->
		<jsp:include page = "head.jsp" flush="false"/>
	<!-- header -->
	<div class="container" style="margin-top: 40px;">
   		<h2>문제신고</h2>
   		<div style="height: 2px; background-color: #ddd; border-bottom: 1px solid #fff; width:97%; margin-bottom: 35px;"></div>
   		<div class="well wrapper">
   			<form action="/feedbackBugSubmit" method="post" enctype="multipart/form-data" onsubmit="infoAdd();">
   				<input type="hidden" id="type" name="type">
	   			<div class="select-type type1" onclick="loadWriteForm('feedback');">
	   				<i class="icon ion-chatbubble-working" style="font-size: 34px; color:#666; padding:20px 0;"></i>
	   				<h4 style="text-shadow: 1px 1px 0px rgba(255,255,255,1); color:#222;">Faeple에 대한 의견</h4>
	   				<span style="color: #aaa; font-size: 13px;">Faeple에게 바라는점이나 개선사항이 있으면 의견을 말씀해주세요</span>
	   			</div>
	   			<div class="select-type" onclick="loadWriteForm('bug');">
	   				<i class="fa fa-exclamation-triangle" style="font-size: 30px; color:#666; display:block;margin-top:12px;margin-bottom:16px;"></i>
	   				<h4 style="text-shadow: 1px 1px 0px rgba(255,255,255,1); color:#222;">문제신고</h4>
	   				<span style="color: #aaa; font-size: 13px;">Faeple 이용중에 기능 문제가 발생했다면 즉시 알려주세요</span>
	   			</div>
	   			<div class="clearfix"></div>
	   			<div id="feedback" style="display: none;">
	   				<h4><strong>Faeple에 대한 의견</strong><br><small>Faeple에서 개선할 사항이 있으면 자유롭게 의견을 알려주세요.</small></h4>
	   				
	   				<br>
	   				<label for="feedback-content">회원님의 의견</label>
	   				<textarea class="form-control" rows="6" maxlength="2000" id="feedback-content" name="feedback-content" style="resize:vertical;" placeholder="내용을 입력해주세요"></textarea>
	   				<p style="color: #9c9c9c; font-size:13px;">소중한 시간을 내 의견을 알려주셔서 감사합니다. 주신의견은 적극 검토하도록 하겠습니다</p>
	   				<div style="text-align: right; margin-top:20px; width: 100%; height: 35px;"><button type="button" class="btn btn-default btn-sm" onclick="cancel('feedback')">취소</button>&nbsp;&nbsp;<button type="submit" class="btn btn-primary btn-sm">보내기</button></div>
	   			</div>
	   			<div id="bug" style="display: none;">
	   				<h4><strong>문제신고</strong></h4>
	   				
	   				<br>
	   				<label for="bug-content">어떤 문제가 있었는지 알려주세요</label>
	   				<textarea class="form-control" rows="6" maxlength="2000" id="bug-content" name="bug-content" style="resize:vertical;" placeholder="문제가 발생한 위치와 단계를 자세하게 설명해주세요"></textarea>
	   				스크린샷 : <br><input type="file" id="file" name="file" multiple="multiple" accept="image/*" onchange="fileCheck(this)">
	   				<p style="color: #9c9c9c; font-size:13px;"></p>
	   				<div style="text-align: right; margin-top:20px; width: 100%; height: 35px;"><button type="button" class="btn btn-default btn-sm" onclick="cancel('bug')">취소</button>&nbsp;&nbsp;<button type="submit" class="btn btn-primary btn-sm">보내기</button></div>
	   			</div>
   			</form>
   		</div>
   	</div>
   	
	</div><!-- end page -->
	<%@ include file="commonScript.jsp" %>
	</div><!-- end viewport -->
	<script type="text/javascript">
		$(function(){
			$('[data-toggle="tooltip"]').tooltip({
	            'placement': 'top',
	            'container': 'body',
	            'trigger': "hover"
	        });
		});
		
		function loadWriteForm(type){
			$(".select-type").hide();
			if($(window).width() > 610){
				$(".well").css("width", 600);
			}
			$("#"+type).show();
			$("#type").val(type);
		}
		
		function cancel(type){
			$("#"+type).hide();
			if($(window).width() > 610){
				$(".well").css("width", 450);
			}
			$(".select-type").show();
		}
		
		function fileCheck(file){
			try{
				if(file.files.length > 5){
					alert("최대 5개까지 첨부가 가능합니다");
					file.value = "";
					return false;
				}
			}catch(e){
				
			}
		}
		function infoAdd(){
			if($("#type").val() == "bug"){
				$("#bug-content").val($("#bug-content").val()+"\n"+navigator.userAgent);
			}
		}
	</script>
</body>
</html>